<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../../../component/pear/css/pear.css" />
	</head>
	<body>
		<form class="layui-form" action="" lay-filter="form-filter">
			<div class="mainBox">
				<div class="main-container">
				    <div class="layui-form-item layui-hide">
                        <label class="layui-form-label required">ID</label>
                        <div class="layui-input-block">
                            <input type="text" name="id" class="layui-input" disabled>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">原始密码</label>
                        <div class="layui-input-block">
                            <div class="layui-input-wrap">
                                <input type="password" name="password" lay-affix="eye" lay-verify="required" placeholder="" autocomplete="new-password" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">新密码</label>
                        <div class="layui-input-block">
                            <div class="layui-input-wrap">
                                <input type="password" name="newPassword" lay-affix="eye" lay-verify="required|password" placeholder="" autocomplete="new-password" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">确认新密码</label>
                        <div class="layui-input-block">
                            <div class="layui-input-wrap">
                                <input type="password" name="confirmNewPassword" lay-affix="eye" lay-verify="required|password" placeholder="" autocomplete="new-password" class="layui-input">
                            </div>
                        </div>
                    </div>
				</div>
			</div>
			<div class="bottom">
				<div class="button-container">
					<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit="" lay-filter="submit-filter">
						<i class="layui-icon layui-icon-ok"></i>提交
					</button>
					<button type="reset" class="pear-btn pear-btn-sm">
						<i class="layui-icon layui-icon-refresh"></i>重置
					</button>
				</div>
			</div>
		</form>
		<script src="../../../component/layui/layui.js"></script>
		<script src="../../../component/pear/pear.js"></script>
		<script>
			layui.use(['form', 'jquery'], function() {
				let form = layui.form;
				let $ = layui.jquery;
				let url = layui.url();
				let id = url.search.id;

                // 自定义验证规则，如下以验证用户名和密码为例
                form.verify({
                    // 数组写法。数组中两个成员值分别代表：[正则表达式、正则匹配不符时的提示文字]
                    password: [/^[\S]{6,20}$/, '密码必须为6到20位的非空字符']
                });

				form.on('submit(submit-filter)', function(data) {
				    if(data.field.newPassword != data.field.confirmNewPassword) {
				        layui.layer.msg("两次输入的新密码不一致！", { icon: 2, title: '400' });
				        return false;
				    }
				    data.field.id = id;
				    $.post('/vtl-user/changePassword', data.field, function(result) {
                            if (result.code == 200) {
                                $.vtl.closeLayer();
                            }
                        });

					return false;
				});

			})
		</script>
	</body>
</html>
